<template>
	<view class="main">
		<!-- <back-fixed title="智能名片"></back-fixed> -->
		<search-box @mySearch="mySearch"></search-box>
		<view class="nav">
			<view class="green_button" v-for="n,key in navList" :key="n.name" :class="{'un_active' : n.unActive}"
				@click="checkNav(n,key)">
				{{n.name}}
			</view>
		</view>
		<view class="box">
			<view class="card_list" v-if="!empty">
				<view class="card_box" v-for="(m,k) in list" :key="m.useUserId" @click="goCode(k)">
					<view class="card_box_title">
						<view class="title_name">
							{{userListdot(m.cardName)}}
							<!-- {{m.cardName}} -->
						</view>
						<view class="single" v-show="m.cardType == 1">
							医生
						</view>
						<view class="mult" v-show="m.cardType == 2">
							团队
						</view>
					</view>
					<view class="card_box_name">
						使用成员：{{m.useUserName}}
					</view>
					<view class="card_box_time">
						{{m.createTime}}由 {{m.userName}} 创建
					</view>
				</view>
				<u-loadmore :status="status" v-if="!empty&&this.list.length>15" style="padding-bottom: 200rpx;" />
			</view>
			<view v-if="empty" style="margin-top: 50px;">
				<empty-team text="暂无专属码"></empty-team>
			</view>
			<!-- <bottom-button @confirm="confirm" text="新建专属码"
				style="position: absolute;width: 100%;;z-index: 2;"></bottom-button> -->
		</view>
		<go-nav></go-nav>
	</view>
</template>

<script>
	import {
		cardList
	} from '@/api/index'
	export default {
		data() {
			return {
				indexKey: null, //点击的上次下标
				MarkArrow: 'arrow-down',
				searchValue: '', //搜索词
				navList: [{
						name: '全部专属码',
						unActive: true
					},
					{
						name: '医生专属码',
						unActive: true
					},
					{
						name: '团队专属码',
						unActive: true
					},
				],
				list: [],
				status: 'loading',
				pageNum: 1, //当前条目数
				totalCount: 0, //总条目数
				pageSize: 15, //每页总条数
				avg: 0, //总页数
				empty: false //true为空页面  false为非空
			}
		},
		onReachBottom() {
			//console.log('rertert','bb');
			//console.log(this.totalCount, this.avg, 'onReachBottom');
			if (this.pageNum >= this.avg) {
				this.status = 'nomore'
				return;
			}
			this.status = 'loading';
			this.pageNum = ++this.pageNum;
			this.getCardList({
				'num': this.indexKey,
				'searchValue': this.searchValue
			})
			this.status = 'loading';
			if (this.pageNum == this.avg) {
				this.status = 'nomore';
			}
		},
		computed:{
			userListdot(names){
				return (names)=>{
					if(names.includes('...'))return names
					if(names.length >=15){
						return names.slice(0,16) +'...'
					}
					return names
				}
			}
		},
		onLoad() {
			this.init()
		},
		methods: {
			goCode(key) { //去专属码页面
				const cardId = this.list[key].cardId
				// console.log(cardId,this.list)
				// return
				uni.redirectTo({
					url: `/pages/intel/details?cardId=${cardId}`
				})
			},
			async init() {
				this.navList[0].unActive = false //选第一个
				await this.getCardList({
					num: 0
				})
			},
			async getCardList(obj) { // 0全部 1单人 2多人
				let objs = {
					'pageNum': this.pageNum,
					'pageSize': this.pageSize,
				}
				if (obj.num == 0) {
					if (obj.searchValue) { //全部带搜索
						let res = await cardList({
							'searchValue': obj.searchValue,
							...objs
						})
						this.myRes(res)
					} else { //全部不带搜索
						let req = await cardList({
							...objs
						})
						this.myRes(req)
					}
				} else {
					if (obj.searchValue) { //单人（多人）带搜索
						let ress = await cardList({
							'cardType': obj.num,
							'searchValue': obj.searchValue,
							...objs
						})
						this.myRes(ress)
					} else { //单人（多人）不带搜索
						let resr = await cardList({
							'cardType': obj.num,
							...objs
						})
						this.myRes(resr)
					}
				}
			},
			myRes(res) {
				this.totalCount = res.total
				this.avg = Math.ceil(this.totalCount / this.pageSize)
				if(this.totalCount == 0){
					this.status = 'nomore'
				}
				if (this.avg == 1 || this.avg == this.pageNum) { //只有一页的时候，有时候不会触发下拉刷新
					this.status = 'nomore'
				}
				if (res.code == 200) {
					this.list.push(...res.rows)
				}
				//console.log(this.list,'23434');
				if (this.list.length > 0) {
					this.empty = false
				} else {
					this.empty = true
				}
				//console.log(this.empty,'23434');
			},
			confirm(val) {
				uni.redirectTo({
					url: `/pages/intel/newCode`
				})
				//console.log(val);
			},
			mySearch(val) {
				this.list = []
				this.searchValue = val
				this.getCardList({
					'num': this.indexKey,
					'searchValue': this.searchValue
				})
				//console.log(val);
			},
			checkNav(obj, key) {
				this.navList.forEach(v => v.unActive = true)
				this.navList[key].unActive = false //选中目标绿色
				if (this.indexKey !== key) { //每次点击，激活的就不会被再次请求
					this.list = []
					this.indexKey = key
					this.getCardList({
						'num': this.indexKey,
						'searchValue': this.searchValue
					})
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.main {
	//	height: 100vh;
		position: absolute;
		width: 100%;
		background-color: #F8F8F8;
		.nav {
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 30rpx;
			padding-bottom: 20rpx;
			padding-top: 70px;
			position: fixed;
			width: 100%;
			display: flex;
			background-color: #FFFFFF;
			justify-content: space-around;
			//padding: 0 24rpx;
			.green_button {
				border-radius: 20rpx;
				padding: 16rpx 30rpx;
				background: #4DC0D9;
				color: #FFFFFF;
			}
		
			.un_active {
				border-radius: 20rpx;
				padding: 16rpx 30rpx;
				background: #F2F2F2;
				color: #333333;
			}
		}
		.box {
			//padding-top: 280rpx;
			padding: 75px 10rpx 0 10rpx;
			min-height: 100vh;
			.card_list {
				margin-top: 95rpx;
				padding-top: 20rpx;
				background-color: #F8F8F8;
				padding-bottom: 80rpx;

				.card_box {
					//margin-bottom: 20rpx;
					margin: 0 24rpx 20rpx 24rpx;
					padding: 0 24rpx;
					background-color: #FFFFFF;
					border-radius: 20rpx;

					.card_box_title {
						display: flex;
						justify-content: space-between;
						align-items: center;

						.title_name {
							font-family: PingFang SC, PingFang SC;
							font-weight: bold;
							font-size: 34rpx;
							color: #212121;
							line-height: 40px;
						}

						.single {
							font-family: PingFang SC, PingFang SC;
							font-weight: bold;
							font-size: 26rpx;
							color: #4DC0D9;
							//	line-height: 30px;
							background: #E2FAFF;
							border-radius: 200rpx;
							padding: 6rpx 20rpx;
						}

						.mult {
							font-family: PingFang SC, PingFang SC;
							font-weight: bold;
							font-size: 26rpx;
							color: #FF8D07;
							//	line-height: 30px;
							background: #FFEFDD;
							border-radius: 200rpx;
							padding: 6rpx 20rpx;
						}
					}

					.card_box_name {
						font-family: PingFang SC, PingFang SC;
						//font-weight: 500;
						font-size: 30rpx;
						color: #666666;
						line-height: 36rpx;
					}

					.card_box_time {
						font-family: PingFang SC, PingFang SC;
						//font-weight: 500;
						font-size: 28rpx;
						color: #999999;
						line-height: 32rpx;
						padding-top: 20rpx;
						padding-bottom: 24rpx;
					}
				}
			}
		}

	}
</style>